<template>
  <div class="share-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>财务分析</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/single_data_analysis' }"
        >单台数据分析</el-breadcrumb-item
      >
    </el-breadcrumb>
    <div class="singles-data">
      <div class="title">单台数据查询</div>
      <div class="data-title">
        提示： 交易额 = 订单实收金额之和（含退款订单）；成交额 =
        交易额-本月的退款金额； 毛利 =
        成交额-本月支付成功订单的成本；机日均是按照有交易的设备数计算；
        后续涉及数据统计的模块将逐步更改为交易额和成交额。
      </div>
      <div class="choice-list">
        <div class="choice-item">
          <div class="choice-title">日期</div>
          <el-date-picker
            v-model="formInline.detailTime"
            type="date"
            placeholder="请选择日期"
            :suffix-icon="CaretBottom"
          />
        </div>
        <div class="choice-item">
          <div class="choice-title">省份</div>
          <el-select
            v-model="formInline.seachProvince"
            placeholder="请选择省份"
          >
            <el-option
              v-for="i in provinceOptions"
              :key="i.value"
              :label="i.label"
              :value="i.value"
            />
          </el-select>
        </div>
        <div class="choice-item">
          <div class="choice-title">城市</div>
          <el-select v-model="formInline.seachCity" placeholder="请选择区">
            <el-option
              v-for="i in cityOptions"
              :key="i.value"
              :label="i.label"
              :value="i.value"
            />
          </el-select>
        </div>
        <div class="choice-item">
          <div class="choice-title">地区</div>
          <el-select v-model="formInline.seachArea" placeholder="请选择地区">
            <el-option
              v-for="i in areaOptions"
              :key="i.value"
              :label="i.label"
              :value="i.value"
            />
          </el-select>
        </div>
        <div class="choice-item">
          <div class="choice-title">商圈</div>
          <el-select
            v-model="formInline.seachBusiness"
            placeholder="请选择商圈"
          >
            <el-option
              v-for="i in businessOptions"
              :key="i.value"
              :label="i.label"
              :value="i.value"
            />
          </el-select>
        </div>
        <div class="choice-item">
          <div class="choice-title">场地</div>
          <el-select v-model="formInline.seachSite" placeholder="请选择场地">
            <el-option
              v-for="i in siteOptions"
              :key="i.value"
              :label="i.label"
              :value="i.value"
            />
          </el-select>
        </div>
        <div class="choice-item">
          <div class="choice-title">行业</div>
          <el-select
            v-model="formInline.seachIndustry"
            placeholder="请选择行业"
          >
            <el-option
              v-for="i in industryOptions"
              :key="i.value"
              :label="i.label"
              :value="i.value"
            />
          </el-select>
        </div>
        <div class="choice-item">
          <div class="choice-title">补货员</div>
          <el-select
            v-model="formInline.seachReplenishman"
            placeholder="请选择补货员"
          >
            <el-option
              v-for="i in replenishmanOptions"
              :key="i.value"
              :label="i.label"
              :value="i.value"
            />
          </el-select>
        </div>
        <div class="choice-item">
          <div class="choice-title">路线</div>
          <el-select v-model="formInline.seachLine" placeholder="请选择路线">
            <el-option
              v-for="i in lineOptions"
              :key="i.value"
              :label="i.label"
              :value="i.value"
            />
          </el-select>
        </div>
        <div class="choice-item">
          <div class="choice-title">设备</div>
          <el-input
            v-model="formInline.device"
            placeholder="请输入设备"
          ></el-input>
        </div>
      </div>
      <div class="left-box">
        <div class="choice-btn">
          <el-button round :icon="Search" color="#0071bb">查询</el-button>
          <el-button round :icon="RefreshLeft">重置</el-button>
        </div>
      </div>

      <div class="title2">
        <span>共3台</span>
        <div class="title2-box">
          <div>
            交易额度
            <div>
              <el-icon color="#fff">
                <CaretTop />
              </el-icon>
              <el-icon color="#fff">
                <CaretBottom />
              </el-icon>
            </div>
          </div>
          <div>
            激活日期
            <div>
              <el-icon color="#c1c1c1">
                <CaretTop />
              </el-icon>
              <el-icon color="#c1c1c1">
                <CaretBottom />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="address-box">
        <div class="address">
          <div>新颜路1号友(869825043628429)</div>
          <div>江苏省苏州市常熟市</div>
        </div>
        <div class="address-text">
          <div class="text">大润发</div>
          <div class="text">房地产物业/写字楼</div>
        </div>
        <div>
          <div>
            <span class="mr-4">补货员：13306236880 </span>
            <span class="mr-4">激活日期：2024-04-22</span>
            <span class="mr-4">线路：小王</span>
          </div>
        </div>
      </div>

      <el-table
        :data="tableData"
        style="width: 100%"
        :height="open ? '200px' : '80px'"
      >
        <el-table-column prop="name" label="交易额 / 成交额" />
        <el-table-column prop="imei" label="支付笔数" />
        <el-table-column prop="close_time" label="毛利 " />
        <el-table-column prop="pay_time" label="退款金额/退款笔数" />
        <el-table-column prop="pay_method" label="故障次数" />
        <el-table-column prop="close_time" label="补货次数" />
        <el-table-column prop="close_time" label="服务人数" />
        <el-table-column prop="close_time" label="复购占比" />
      </el-table>

      <div>
        <div class="is-open" @click="isOpen">
          <img src="/src/assets//data-center/收起.png" />
          收起趋势图
        </div>
      </div>
      <el-tabs
        v-model="activeTab"
        type="card"
        class="demo-tabs"
        @tab-click="handleClick"
      >
        <el-tab-pane label="销售与退款趋势" name="1">
          <div id="echarts1" style="width: 90vw; height: 440px"></div>
        </el-tab-pane>
        <el-tab-pane label="缺补趋势" name="2">
          <div id="echarts2" style="width: 90vw; height: 440px"></div>
        </el-tab-pane>
        <el-tab-pane label="故障修复趋势" name="3">
          <div id="echarts3" style="width: 90vw; height: 440px"></div>
        </el-tab-pane>
        <el-tab-pane label="时段销售情况" name="4">
          <div class="echarts4-box">
            <div id="echarts4" style="width: 90vw; height: 440px"></div>
            <el-tabs
              v-model="activeTime"
              type="card"
              class="time-tabs"
              @tab-click="activeTimeClick"
            >
              <el-tab-pane
                :label="v.label"
                :name="v.value"
                v-for="(v, i) of timeList"
                :key="i"
              ></el-tab-pane>
            </el-tabs>
          </div>
        </el-tab-pane>
      </el-tabs>

      <!-- 暂时--- -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, nextTick } from "vue";
import {
  CaretTop,
  CaretBottom,
  HelpFilled,
  Search,
  RefreshLeft,
} from "@element-plus/icons-vue";
import type { TabsPaneContext, ComponentSize } from "element-plus";
const open = ref(false);
function isOpen() {
  open.value = !open.value;
}
// 搜索数据
const formInline = ref({
  detailTime: "",
  seachProvince: "",
  seachCity: "",
  seachArea: "",
  seachBusiness: "",
  seachSite: "",
  seachIndustry: "",
  seachReplenishman: "",
  seachLine: "",
  device: "",
});
const provinceOptions = ref([
  {
    label: "四川",
    value: "1",
  },
  {
    label: "广东",
    value: "2",
  },
  {
    label: "云南",
    value: "3",
  },
]);
const cityOptions = ref([
  {
    label: "成都",
    value: "1",
  },
  {
    label: "绵阳",
    value: "2",
  },
  {
    label: "眉山",
    value: "3",
  },
]);
const areaOptions = ref([
  {
    label: "地区1",
    value: 1,
  },
  {
    label: "地区2",
    value: 0,
  },
]);
const businessOptions = ref([
  {
    label: "商圈1",
    value: 1,
  },
  {
    label: "商圈2",
    value: 0,
  },
]);
const siteOptions = ref([
  {
    label: "场地1",
    value: 1,
  },
  {
    label: "场地2",
    value: 0,
  },
]);
const industryOptions = ref([
  {
    label: "行业1",
    value: 1,
  },
  {
    label: "行业2",
    value: 0,
  },
]);
const replenishmanOptions = ref([
  {
    label: "补货员1",
    value: 1,
  },
  {
    label: "补货员2",
    value: 0,
  },
]);
const lineOptions = ref([
  {
    label: "路线1",
    value: 1,
  },
  {
    label: "路线2",
    value: 0,
  },
]);
// 切换可视化图标tab
const activeTab = ref("1");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const initEcharts1 = () => {
  var myChart = echarts.init(document.getElementById("echarts1"));
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: "axis",
      transitionDuration: 0,
      backgroundColor: "rgba(0,0,0,.5)", // 自定义背景颜色
      textStyle: {
        color: "#fff", //设置文字颜色
      },
    },
    legend: {
      data: ["交易额", "退款金额"],
    },
    color: ["#0071bb", "#f6921e"],
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar", "stack"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    xAxis: [
      {
        type: "category",
        axisTick: { show: false },
        data: [
          "2012-06-03\n周一",
          "2013-06-03\n周一",
          "2014-06-03\n周一",
          "2015-06-03\n周一",
          "2016-06-03\n周一",
          "2017-06-03\n周一",
          "2018-06-03\n周一",
          "2019-06-03\n周一",
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "金额（次）",
        position: "left",
        alignTicks: true,
        axisLine: {
          show: true,
        },
        axisLabel: {
          formatter: "{value}",
        },
        splitLine: {
          lineStyle: {
            color: "#c1c0c0", // 0 代表完全的黑色，你可以使用其他颜色值
            width: 1, // 分割线宽度
            type: "solid", // 分割线类型
          },
        },
      },
    ],
    series: [
      {
        name: "交易额",
        type: "bar",
        barGap: 0,
        emphasis: {
          focus: "series",
        },
        barMaxWidth: 15,
        data: [320, 332, 301, 334, 390, 320, 332, 301],
      },
      {
        name: "退款金额",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        barMaxWidth: 15,
        data: [150, 232, 201, 154, 190, 182, 191, 234],
      },
    ],
  });
  // 监听窗口大小变化
  window.addEventListener("resize", () => {
    if (myChart) {
      myChart.resize();
    }
  });
};
const initEcharts2 = () => {
  var myChart = echarts.init(document.getElementById("echarts2"));
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: "axis",
      transitionDuration: 0,
      backgroundColor: "rgba(0,0,0,.5)", // 自定义背景颜色
      textStyle: {
        color: "#fff", //设置文字颜色
      },
    },
    legend: {
      data: ["销售量", "设备当前货量", "补货数量"],
    },
    color: ["#d3145a", "#0071bb", "#f6921e"],
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar", "stack"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    xAxis: [
      {
        type: "category",
        axisTick: { show: false },
        data: [
          "2012-06-03\n周一",
          "2013-06-03\n周一",
          "2014-06-03\n周一",
          "2015-06-03\n周一",
          "2016-06-03\n周一",
          "2017-06-03\n周一",
          "2018-06-03\n周一",
          "2019-06-03\n周一",
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "数量（次）",
        nameLocation: "end",
        min: 0, // 可以根据需要设置合适的最小值
        splitLine: {
          lineStyle: {
            color: "#c1c0c0", // 0 代表完全的黑色，你可以使用其他颜色值
            width: 1, // 分割线宽度
            type: "solid", // 分割线类型
          },
        },
      },
      {
        type: "value",
        name: "交易额（元）",
        nameLocation: "end",
        position: "right",
        min: 0, // 可以根据需要设置合适的最小值
        splitLine: {
          lineStyle: {
            color: "#c1c0c0", // 0 代表完全的黑色，你可以使用其他颜色值
            width: 1, // 分割线宽度
            type: "solid", // 分割线类型
          },
        },
      },
    ],
    series: [
      {
        name: "销售量",
        type: "bar",
        barGap: 0,
        emphasis: {
          focus: "series",
        },
        barMaxWidth: 15,
        data: [320, 332, 301, 334, 390, 320, 332, 301],
      },
      {
        name: "设备当前货量",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        barMaxWidth: 15,
        data: [1220, 1182, 1911, 2314, 2910, 1182, 1911, 1314],
      },
      {
        name: "补货数量",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        barMaxWidth: 15,
        data: [150, 232, 201, 154, 190, 182, 191, 234],
      },
    ],
  });
  // 监听窗口大小变化
  window.addEventListener("resize", () => {
    if (myChart) {
      myChart.resize();
    }
  });
};
const initEcharts3 = () => {
  var myChart = echarts.init(document.getElementById("echarts3"));
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: "axis",
      transitionDuration: 0,
      backgroundColor: "rgba(0,0,0,.5)", // 自定义背景颜色
      textStyle: {
        color: "#fff", //设置文字颜色
      },
    },
    legend: {
      data: ["故障次数", "修复次数"],
    },
    color: ["#d3145a", "#8bc53f"],
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar", "stack"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    xAxis: [
      {
        type: "category",
        axisTick: { show: false },
        data: [
          "2012-06-03\n周一",
          "2013-06-03\n周一",
          "2014-06-03\n周一",
          "2015-06-03\n周一",
          "2016-06-03\n周一",
          "2017-06-03\n周一",
          "2018-06-03\n周一",
          "2019-06-03\n周一",
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "数量（次）",
        position: "left",
        alignTicks: true,
        axisLine: {
          show: true,
        },
        axisLabel: {
          formatter: "{value}",
        },
        splitLine: {
          lineStyle: {
            color: "#c1c0c0", // 0 代表完全的黑色，你可以使用其他颜色值
            width: 1, // 分割线宽度
            type: "solid", // 分割线类型
          },
        },
      },
      {
        type: "value",
        name: "交易额（元）",
        position: "right",
        alignTicks: true,
        axisLine: {
          show: true,
        },
        axisLabel: {
          formatter: "{value}",
        },
        splitLine: {
          lineStyle: {
            color: "#c1c0c0", // 0 代表完全的黑色，你可以使用其他颜色值
            width: 1, // 分割线宽度
            type: "solid", // 分割线类型
          },
        },
      },
    ],
    series: [
      {
        name: "故障次数",
        type: "bar",
        barGap: 0,
        emphasis: {
          focus: "series",
        },
        barMaxWidth: 15,
        data: [0, 0, 3, 0, 390, 0, 332, 301],
      },
      {
        name: "修复次数",
        type: "bar",
        emphasis: {
          focus: "series",
        },
        barMaxWidth: 15,
        data: [0, 0, 7, 0, 190, 0, 191, 234],
      },
    ],
  });
  // 监听窗口大小变化
  window.addEventListener("resize", () => {
    if (myChart) {
      myChart.resize();
    }
  });
};

const initEcharts4 = () => {
  var myChart = echarts.init(document.getElementById("echarts4"));
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: "axis",
      transitionDuration: 0,
      backgroundColor: "rgba(0,0,0,.5)", // 自定义背景颜色
      textStyle: {
        color: "#fff", //设置文字颜色
      },
    },
    legend: {
      data: ["交易额", "唯一用户数", "订单数"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },

    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "0时",
        "1时",
        "2时",
        "3时",
        "4时",
        "5时",
        "6时",
        "7时",
        "8时",
        "9时",
        "10时",
        "11时",
        "12时",
        "13时",
        "14时",
        "15时",
        "16时",
        "17时",
        "18时",
        "19时",
        "20时",
        "21时",
        "22时",
        "23时",
      ],
    },
    yAxis: {
      type: "value",
      name: "金额（元）",
      nameLocation: "end",
      min: 0, // 可以根据需要设置合适的最小值
      splitLine: {
        lineStyle: {
          color: "#c1c0c0", // 0 代表完全的黑色，你可以使用其他颜色值
          width: 1, // 分割线宽度
          type: "solid", // 分割线类型
        },
      },
    },
    series: [
      {
        name: "唯一用户数",
        type: "line",
        smooth: true, // 添加这个属性来启用平滑曲线
        stack: "Total",
        data: [
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          0,
          230,
          210,
          120,
          132,
          101,
          134,
          90,
          230,
          210,
          120,
          132,
          101,
          134,
          90,
          230,
          210,
        ],
        lineStyle: {
          color: "#d2145b", // 线条颜色
          width: 2,
        },
        itemStyle: {
          color: "#d2145b", // 数据点颜色
          borderColor: "#d2145b", // 数据点边框颜色
          borderWidth: 1,
        },
      },
      {
        name: "订单数",
        type: "line",
        smooth: true, // 添加这个属性来启用平滑曲线
        stack: "Total",
        data: [
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          0,
          230,
          210,
          120,
          132,
          101,
          134,
          90,
          230,
          210,
          120,
          132,
          101,
          134,
          90,
          230,
          210,
        ],
        lineStyle: {
          color: "#017094", // 线条颜色
          width: 2,
        },
        itemStyle: {
          color: "#017094", // 数据点颜色
          borderColor: "#017094", // 数据点边框颜色
          borderWidth: 1,
        },
      },
      {
        name: "交易额",
        type: "line",
        smooth: true, // 添加这个属性来启用平滑曲线
        stack: "Total",
        data: [
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          null,
          0,
          230,
          210,
          120,
          132,
          101,
          134,
          90,
          230,
          210,
          120,
          132,
          101,
          134,
          90,
          230,
          210,
        ],
        // 
        lineStyle: {
          color: "#f7941f", // 线条颜色
          width: 2,
        },
        itemStyle: {
          color: "#f7941f", // 数据点颜色
          borderColor: "#f7941f", // 数据点边框颜色
          borderWidth: 1,
        },
      },
    ],
  });
  // 监听窗口大小变化
  window.addEventListener("resize", () => {
    if (myChart) {
      myChart.resize();
    }
  });
};
nextTick(() => {
  initEcharts1();
  initEcharts2();
  initEcharts3();
  initEcharts4();
});

// 表格数据
const tableData = [
  {
    id: "1",
    open_time: "2024-12-01 12:00:00",
    close_time: "1",
    pay_time: "华阳",
    pay_method: "微信",
    order_num: "87434893841",
    order_type: "等待支付",
    name: "伯克材料3668649",
    imei: "8698254043668649",
    tell: "139849894494",
    personnel: "小郑",
    check: "详情",
    type: "1",
  },
  {
    id: "2",
    open_time: "2024-12-01 12:00:00",
    close_time: "1",
    pay_time: "华阳",
    pay_method: "支付宝",
    order_num: "87434893841",
    order_type: "支付成功",
    name: "伯克材料3668649",
    imei: "8698254043668649",
    tell: "139849894494",
    personnel: "小郑",
    check: "详情",
    type: "2",
  },
  {
    id: "3",
    open_time: "2024-12-01 12:00:00",
    close_time: "1",
    pay_time: "华阳",
    pay_method: "支付宝",
    order_num: "87434893841",
    order_type: "交易关闭",
    name: "伯克材料3668649",
    imei: "8698254043668649",
    tell: "139849894494",
    personnel: "小郑",
    check: "详情",
    type: "3",
  },
];
// 时段销售情况切换
let activeTime = ref(1);
const timeList = [
  {
    label: "全部",
    value: 1,
  },
  {
    label: "工作日",
    value: 2,
  },
  {
    label: "周末",
    value: 3,
  },
];
const activeTimeClick = () => {
  // 在此切换现状图图标数据
};
</script>

<style lang="scss" scoped>
.share-page {
  height: 90vh !important;
}
.mr-4 {
  margin-right: 4px;
}
.singles-data {
  background-color: #fff;
  margin-top: 20px;
  height: 100%;
  .title {
    font-size: 16px;
    color: #000;
    padding: 10px;
  }
  .data-title {
    background: #0071bb;
    color: #fff;
    font-size: 12px;
    padding: 10px 20px;
  }
  .title2 {
    background: #d9d9d9;
    color: #4d4d4d;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 20px;
    margin: 10px 0px;
    .title2-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 180px;

      > div {
        height: 30px;
        // line-height: 30px;
        width: 90px;
        margin-right: 10px;
        padding: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        border: 1px solid #b0b0b0;
        .el-icon {
          width: 100% !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
          flex-direction: column !important;
          // background: #0071bb;
          cursor: pointer;
        }
      }
      > div:first-child {
        background: #0071bb;
        border: 1px solid #0071bb;
        color: #fff;
      }
    }
  }
  .address-box {
    font-size: 12px;
    display: flex;
    justify-content: start;
    align-items: start;
    padding: 10px 20px;
    .address {
      > div:first-child {
        font-size: 16px;
      }
      margin-right: 20px;
    }
    .address-text {
      margin-right: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .text {
        min-width: 50px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #0071bb;
        border: 1px solid #0071bb;
        margin-right: 4px;
        padding: 0px 2px;
      }
    }
  }
  .is-open {
    text-align: center;
    color: #0071bb;
    font-size: 12px;
    margin: 20px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 14px;
      height: 14px;
    }
  }
  .left-box {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-left: 20px;
    .choice-btn {
      display: flex;
      justify-content: left;
    }
  }

  .list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    > div {
      width: 19%;
      background: rgb(241, 241, 241);
      height: 200px;
      border-radius: 15px;
      // padding: 15px;

      .list-top {
        background-color: #0071bb;
        border-top-right-radius: 15px;
        border-top-left-radius: 15px;
        width: 100%;
        height: 50px;
        color: #fff;
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img {
          width: 22px;
          height: 22px;
          margin: 0px 4px;
        }
        .tip-img {
          width: 20px;
          height: 20px;
        }
      }
      .content {
        padding: 20px;
        .num {
          font-size: 20px;
        }
        .up {
          font-size: 10px;
          padding: 16px 0px;
          border-bottom: 2px solid #ccc;
          display: flex;
          align-items: center;
          .up-img {
            width: 12px;
            height: 16px;
          }
        }
        .day {
          font-size: 10px;
          margin-top: 20px;
          > span {
            margin-right: 20px;
          }
        }
      }
    }
  }

  .top-tabs {
    text-align: center;
    display: flex;
    font-weight: bold;
    font-size: 14px;
    padding: 10px;

    .tabs-item {
      width: 150px;
      padding: 5px;
      background-color: #fff;
      border: 1px solid #d2d2d2;
      border-radius: 20px;
      margin-right: 15px;
    }

    .activity-item {
      background-color: #f0a93e;
      border: 1px solid #f0a93e;
      color: #fff;
    }

    .tabs-item:hover {
      cursor: pointer;
    }
  }

  .choice-list {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
    width: 100%;

    .choice-item {
      width: 20%;
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .choice-title {
        font-size: 12px;
        width: 80px;
        text-align: center;
      }

      .rounded-input {
        width: 250px;
      }
    }
  }

  .btn-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 20px;
  }

  .page_number {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
  }

  .tables {
    margin-top: 10px;
    .table-btn {
      color: #519ed0;
      cursor: pointer;
    }
  }
}
.from-title {
  font-weight: bold;
  margin: 10px;
  font-size: 18px;
}
.flex-e {
  display: flex;
  align-items: center;
  justify-content: end;
}

:deep() {
  .modal {
    th {
      background-color: #fff !important;
      color: #666666 !important;
    }
  }

  .el-input {
    width: 100%;
  }
  .el-date {
    width: 100%;
  }
  .el-select {
    width: 100%;
  }
  .el-tabs__header {
    padding-right: 20px !important;
    padding-left: 20px !important;
    height: 30px !important;
  }
  .el-tabs,
  .el-tabs__nav-wrap,
  .el-tabs__nav-scroll,
  .el-tabs__nav {
    height: 30px !important;
    border-radius: 0px !important;
  }
  .el-tabs__item {
    height: 30px !important;
  }
  .is-active {
    background: #0071bb;
    color: #fff;
  }
  th {
    background-color: #6d6d6d !important;
    color: #fff !important;
  }
  canvas {
    background: #00ffff;
    width: 100% !important;
    left: -44px !important;
  }
  .el-tabs__content {
    margin: 0px 20px !important;
  }
  .el-tabs__header {
    margin: 0px !important;
  }
  #echarts4 {
    width: 86vw !important;
    canvas {
      width: 100% !important;
      left: -16px !important;
    }
  }
  .echarts4-box {
    position: relative;
    .time-tabs {
      position: absolute;
      top: 10px;
      right: 10px;
    }
    .el-tabs__item {
      background: #fff;
      margin-right: 10px;
    }
    .is-active {
      background: #0071bb;
      color: #fff;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__nav,
    .el-tabs--card > .el-tabs__header {
      border: none;
    }
  }
}
</style>
